<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>房租价格地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img {
            width: 25px;
            height: 34px;
        }

        .amap-marker-label {
            border: 0;
            background-color: transparent;
        }

        .info {
            position: relative;
            margin: 0;
            top: 0;
            right: 0;
            min-width: 0;
        }

        #control button {
            position: fixed;
            height: 30px;
            width: 100px;
            background-color: blanchedalmond;
            left: 10px;
            cursor: pointer;
        }

        #control button:nth-child(1) {
            top: 20px;
        }

        #control button:nth-child(2) {
            top: 60px;
        }

        #control button:nth-child(3) {
            top: 100px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <ul id="control">
        <button id="haci">哈慈</button>
        <button id="nanzhi">南直小区</button>
        <button id="wutong">梧桐郡</button>
    </ul>

    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=a56ec4192c2d0173ad438b4e01c1a81b"></script>
    <script type="text/javascript">

        var map = new AMap.Map('container', {
            resizeEnable: true,
            center: [126.691866, 45.688904],
            zoom: 14.7
        });

        var haciBtn = document.querySelector('#haci')
        haciBtn.addEventListener('click', function () {
            map.panTo([126.691866, 45.688904], 0)
            map.setZoom(14.7, true)
        })
        var haciBtn = document.querySelector('#nanzhi')
        haciBtn.addEventListener('click', function () {
            map.panTo([126.698894, 45.794332], 0)
            map.setZoom(15.9, true)
        })
        var haciBtn = document.querySelector('#wutong')
        haciBtn.addEventListener('click', function () {
            map.panTo([126.716847, 45.79747], 0)
            map.setZoom(16, true)
        })

        var markers = [
            {
                position: [126.695249, 45.69918],
                content: "<div class='info'>工程机械厂家属楼<p><br/>1室1厅 800元/月<br/>2室1厅 900元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.700195, 45.696761],
                content: "<div class='info'>福泰绿色名苑<p><br/>1室1厅 900元/月<br/>2室1厅 1400元/月<br/>3室1厅 1800元/月</div>",
                offset: new AMap.Pixel(5, -40)
            },
            {
                position: [126.708197, 45.69175],
                content: "<div class='info'>三鑫小区<p><br/>1室1厅 500元/月<br/>2室1厅 1400元/月<br/>3室1厅 1800元/月</div>",
                offset: new AMap.Pixel(5, -40)
            },
            {
                position: [126.710132, 45.68844],
                content: "<div class='info'>招商诺丁山<p><br/>1室1厅 1200元/月<br/>2室1厅 1500元/月<br/>3室1厅 2000元/月</div>",
                offset: new AMap.Pixel(5, 0)
            },
            {
                position: [126.70509, 45.68904],
                content: "<div class='info'>东山聚宝<p><br/>1室1厅 700元/月<br/>2室1厅 1000元/月<br/>3室1厅 1400元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.719302, 45.695661],
                content: "<div class='info'>绿城杨柳郡<p><br/>2室1厅 1500元/月</div>",
                offset: new AMap.Pixel(5, -40)
            },
            // {
            //     position: [126.690061, 45.6961],
            //     content: "<div class='info'>格兰云天<p><br/>1室1厅 1300元/月<br/>2室1厅 1600元/月<br/>3室1厅 1900元/月</div>",
            //     offset: new AMap.Pixel(-155, -30)
            // },
            {
                position: [126.688386, 45.692605],
                content: "<div class='info'>立汇·美罗湾三期<p><br/>1室1厅 1100元/月<br/>2室1厅 1500元/月<br/>3室1厅 1700元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.690594, 45.688139],
                content: "<div class='info'>立汇·美罗湾二期<p><br/>1室1厅 1100元/月<br/>2室1厅 1400元/月<br/>3室1厅 1800元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.702461, 45.687711],
                content: "<div class='info'>哈药小区南区<p><br/>1室1厅 600元/月<br/>2室1厅 800元/月</div>",
                offset: new AMap.Pixel(-145, 40)
            },
            {
                position: [126.693089, 45.682367],
                content: "<div class='info'>金色城邦(一期)<p><br/>1室1厅 1000元/月<br/>2室1厅 1600元/月</div>",
                offset: new AMap.Pixel(-155, -40)
            },
            {
                position: [126.695322, 45.677236],
                content: "<div class='info'>融创城领域<p><br/>2室1厅 1500元/月<br/>3室1厅 1700元/月</div>",
                offset: new AMap.Pixel(5, -40)
            },
            {
                position: [126.680152, 45.684145],
                content: "<div class='info'>邓家新区<p><br/>1室1厅 600元/月</div>",
                offset: new AMap.Pixel(-145, -40)
            },
            {
                position: [126.676527, 45.699077],
                content: "<div class='info'>澜悦东方<p><br/>1室1厅 3000元/月<br/>2室1厅 2600元/月</div>",
                offset: new AMap.Pixel(-155, -40)
            },
            {
                position: [126.669503, 45.696298],
                content: "<div class='info'>华润·中央公园<p><br/>1室1厅 1800元/月<br/>2室1厅 3000元/月<br/>3室1厅 5000元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.667168, 45.690504],
                content: "<div class='info'>绿海华庭三期<p><br/>1室1厅 1400元/月<br/>2室1厅 1800元/月</div>",
                offset: new AMap.Pixel(-155, -40)
            },
            {
                position: [126.696932, 45.795408],
                content: "<div class='info'>东直家园<p><br/>1室1厅 1400元/月<br/>2室1厅 1500元/月</div>",
                offset: new AMap.Pixel(-150, -50)
            },
            {
                position: [126.69500, 45.793591],
                content: "<div class='info'>三棵小区<p><br/>1室1厅 800元/月<br/>2室1厅 1000元/月</div>",
                offset: new AMap.Pixel(-150, -50)
            },
            {
                position: [126.696153, 45.791774],
                content: "<div class='info'>新江桥小区<p><br/>1室1厅 700元/月<br/>2室1厅 900元/月</div>",
                offset: new AMap.Pixel(-145, -50)
            },
            {
                position: [126.701717, 45.795234],
                content: "<div class='info'>祥泰名苑北区<p><br/>1室1厅 700元/月<br/>2室1厅 750元/月</div>",
                offset: new AMap.Pixel(-145, -50)
            },
            {
                position: [126.701717, 45.794025],
                content: "<div class='info'>祥泰名苑南区<p><br/>2室1厅 1000元/月</div>",
                offset: new AMap.Pixel(-150, -40)
            },
            {
                position: [126.70659, 45.793488],
                content: "<div class='info'>三机小区(西区)<p><br/>2室1厅 700元/月</div>",
                offset: new AMap.Pixel(-145, -40)
            },
            {
                position: [126.705524, 45.796473],
                content: "<div class='info'>北树嘉园<p><br/>1室1厅 1200元/月<br/>2室1厅 1300元/月</div>",
                offset: new AMap.Pixel(-155, -40)
            },
            {
                position: [126.6987, 45.793606],
                content: "<div class='info'>汇龙玖和琚<p><br/>1室1厅 1600元/月<br/>2室1厅 1700元/月</div>",
                offset: new AMap.Pixel(-155, -40)
            },
            {
                position: [126.693176, 45.790512],
                content: "<div class='info'>泰达小区<p><br/>1室1厅 850元/月</div>",
                offset: new AMap.Pixel(-145, -40)
            },
            {
                position: [126.688387, 45.790925],
                content: "<div class='info'>维也纳河畔新城<p><br/>1室1厅 1000元/月<br/>2室1厅 1300元/月<br/>3室1厅 1850元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.689765, 45.78925],
                content: "<div class='info'>绿化小区<p><br/>2室1厅 1400元/月</div>",
                offset: new AMap.Pixel(-150, -40)
            },
            {
                position: [126.682566, 45.789309],
                content: "<div class='info'>维也纳河畔新城A区<p><br/>1室1厅 1000元/月<br/>2室1厅 1300元/月</div>",
                offset: new AMap.Pixel(0, -50)
            },
            {
                position: [126.685353, 45.79713],
                content: "<div class='info'>滨港水岸F区<p><br/>1室1厅 1100元/月<br/>2室1厅 1300元/月</div>",
                offset: new AMap.Pixel(0, -50)
            },
            {
                position: [126.681282, 45.795808],
                content: "<div class='info'>滨港水岸D区<p><br/>1室1厅 1000元/月<br/>2室1厅 1300元/月</div>",
                offset: new AMap.Pixel(0, -50)
            },
            {
                position: [126.683672, 45.799627],
                content: "<div class='info'>滨港水岸怡江湾东区<p><br/>1室1厅 1400元/月</div>",
                offset: new AMap.Pixel(-175, -30)
            },
            {
                position: [126.714492, 45.797358],
                content: "<div class='info'>梧桐郡<p><br/>1室1厅 950元/月<br/>2室1厅 1600元/月</div>",
                offset: new AMap.Pixel(-150, -50)
            },
            {
                position: [126.714492, 45.797358],
                content: "<div class='info'>梧桐郡<p><br/>1室1厅 950元/月<br/>2室1厅 1600元/月</div>",
                offset: new AMap.Pixel(-150, -50)
            },
            {
                position: [126.719685, 45.797569],
                content: "<div class='info'>恒大锦城<p><br/>1室1厅 1000元/月<br/>2室1厅 1200元/月</div>",
                offset: new AMap.Pixel(-150, -50)
            },
            {
                position: [126.713525, 45.794215],
                content: "<div class='info'>轴承小区<p><br/>2室1厅 700元/月</div>",
                offset: new AMap.Pixel(-145, -40)
            },
            {
                position: [126.716113, 45.792124],
                content: "<div class='info'>融创璟园<p><br/>1室1厅 1300元/月<br/>2室1厅 1500元/月<br/>3室1厅 2000元/月</div>",
                offset: new AMap.Pixel(-155, -50)
            },
            {
                position: [126.718993, 45.793032],
                content: "<div class='info'>鑫都嘉园<p><br/>1室1厅 900元/月</div>",
                offset: new AMap.Pixel(-140, -50)
            }
        ]

        markers.forEach(function (marker) {
            new AMap.Marker({
                map: map,
                position: [marker.position[0], marker.position[1]],
                icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                anchor: 'bottom-center',
                offset: new AMap.Pixel(0, 0)
            }).setLabel({
                direction: 'right',
                offset: marker.offset,
                content: marker.content
            })
        })

        // 设置鼠标划过点标记显示的文字提示
        // marker.setTitle('我是marker的title');

        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    </script>
</body>

</html>